<template>
  <div>
    <el-input
        size="mini"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
    </el-input>
    <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        @node-contextmenu="rightClick"
        ref="tree">
    </el-tree>
    <VueContextMenu
        :target="contextMenuTarget"
        :show="contextMenuVisible"
        class="right-menu"
        @update:show="(show) => contextMenuVisible = show">
      <a
          href="javascript:;"
          @click="edit">编辑</a>
      <a
          href="javascript:;"
          @click="remove">删除</a>
    </VueContextMenu>
  </div>
</template>

<script scoped>
import {component as VueContextMenu} from '@xunlei/vue-context-menu'

export default {
  name: 'home-aside',
  props: {},
  components: {VueContextMenu},
  computed: {},
  data () {
    return {
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeNodeData: '', // 存当前数据
      treeNode: '', // 存当前节点信息
      contextMenuVisible: false,
      contextMenuTarget: null,
      timer: {},
      treeClickCount: 0
    }
  },
  methods: {
    getConnctionList () {
      this.$ipcRequest.request({
        method: 'getDbConnectionList'
      }, ({data, message, code}) => {
        if (code === 0) {
          this.data = []
          for (let conn of data) {
            let node = JSON.parse(conn.content)
            node.filePath = conn.filePath
            this.data.push(node)
          }
        } else {
          this.$message.error(message)
        }
      })
    },
    edit () {
      this.$emit('editConnection', false, this.treeNodeData)
      this.contextMenuVisible = false
    },
    remove () {
      this.$ipcRequest.request({
        method: 'rmDbConnectionInfo',
        param: this.treeNodeData.filePath
      }, ({data, message, code}) => {
        if (code === 0) {
          this.$message.success('删除成功!')
        } else {
          this.$message.error('删除失败!')
        }
        this.getConnctionList()
      })
      this.contextMenuVisible = false
    },
    nodeClick (data, node) {
      //记录点击次数
      this.treeClickCount++
      //单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
      if (this.treeClickCount >= 2) {
        return
      }
      //计时器,计算300毫秒为单位,可自行修改
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          //把次数归零
          this.treeClickCount = 0
          //单击事件处理

        } else if (this.treeClickCount > 1) {
          //把次数归零
          this.treeClickCount = 0
          this.treeNodeData = data// 存当前数据
          this.treeNode = node// 存当前节点信息
          this.$emit('useBrotherMethod', 'main', 'openTab', {
            type: 'sql-panel',
            data: data
          })
        }
      }, 300)

    },
    rightClick (e, data, node) {
      this.treeNodeData = data// 存当前数据
      this.treeNode = node// 存当前节点信息
      console.log('rightClick', this.treeNodeData, this.treeNode)
      this.contextMenuVisible = true// 让菜单显示
      console.log('0', e, '1', e.screenX, '2', e.screenY)
      const ele = document.querySelector('.right-menu')
      ele.style.position = 'fixed'
      ele.style.top = `${e.clientY}px`
      ele.style.left = `${e.clientX + 10}px` // 根据鼠标点击位置设置菜单出现
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted () {
  },
  created () {
    this.getConnctionList()
  }
}
</script>

<style scoped>

.right-menu {
  font-size: 14px;
  position: fixed;
  background: #fff;
  border: solid 1px rgba(0, 0, 0, .2);
  border-radius: 3px;
  z-index: 999;
  display: none;
}

.right-menu a {
  width: 150px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  display: block;
  color: #1a1a1a;
  padding: 2px;
}

.right-menu a:hover {
  background: #bbb;
  color: #fff;
}

.right-menu {
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, .1);
  border-radius: 1px;
}

a {
  text-decoration: none;
}
</style>
